<script setup lang="ts">
import PlatformCurrency from './view/PlatformCurrency.vue'
import EarningsCard from './view/EarningsCard.vue'
import CouponsCard from './view/CouponsCard.vue'
import WorkCard from './view/WorkCard.vue'
import OrderCard from './view/OrderCard.vue'
import IssueCard from './view/IssueCard.vue'
import SystemMessage from './view/SystemMessage.vue'
import CustomerCard from './view/CustomerCard.vue'
import SocializingCard from './view/SocializingCard.vue'
import { useAppsStore } from '@/stores/modules/app'

const useStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(useStore)

const state = reactive({
  totalEarnings: 0,
  resourcesCount: 0
})
</script>

<template>
  <div class="user-home-page">
    <div class="row flex">
      <platform-currency :gold="userInfo.integral" />
      <earnings-card :totalEarnings="state.totalEarnings" :balance="10" />
      <coupons-card />
      <work-card :resourcesCount="userInfo.workNum" />
    </div>
    <order-card />
    <div class="flex bottom">
      <div class="bottom-left">
        <system-message />
        <issue-card />
      </div>
      <div class="bottom-right">
        <customer-card />
        <socializing-card />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-home-page {
  .row {
    gap: 16px;
  }
  .bottom-left {
    flex: 1;
  }
  .bottom {
    margin-top: 16px;
  }
  .bottom-right {
    width: 370px;
    margin-left: 16px;
  }
}
</style>
F
